<template>
  <div>
    <el-dialog
      class="afterInvest-add-open custom-dialog"
      width="60%"
      :visible.sync="visible"
      @close="closeHandle"
      :append-to-body="appendToBody"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div slot="title" class="title">
        {{ title }}
      </div>
      <el-form ref="dataForm" :inline="true" label-width="80px" :model="dataForm">
        <el-form-item label="" prop="investName">
          <el-input v-model="dataForm.investName" size="small" clearable placeholder="请输入子投资名称" style="width: 200px;"></el-input>
        </el-form-item>
        <el-form-item label="" prop="investStatus">
          <el-select v-model="dataForm.investStatus" size="small" clearable placeholder="投资状态" style="width: 200px;">
            <el-option
              v-for="item in statusList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-left: 20px">
          <el-button size="small" class="bg-green" @click="getList">查询</el-button>
          <el-button size="small" @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="filex">
        <el-table
          ref="table"
          v-loading="listLoading"
          :data="list"
          stripe
          fit
          size="mini"
          @row-click="submitHandle"
          @sort-change="sortChange"
          :header-cell-style="{color:'#333'}"
          style="width: 100%;"
        >
          <el-table-column v-if="type === 'id'" prop="investId" label="编号" align="left" width="78" fixed sortable="custom"></el-table-column>
          <el-table-column
            v-else
            type="index"
            label=""
            align="center"
            width="50"
            fixed
          >
            <template slot-scope="scope">
              <span v-if="type === 'id'">{{ scope.$index }}</span>
              <el-radio
                v-else-if="type === 'radio'"
                v-model="radio"
                :label="scope.row.investId"
              >
                {{ "" }}
              </el-radio>
              <el-checkbox
                v-else
                v-model="checkArr"
                :label="scope.row.investId"
                :disabled="scope.row.hasParent"
              >
                {{ "" }}
              </el-checkbox>
              <div class="checkhidden"></div>
            </template>
          </el-table-column>
          <el-table-column prop="investStrategyName" label="子投资名称" align="left" min-width="200" fixed sortable="custom" show-overflow-tooltip>
            <template slot-scope="{row}">
              <!-- <span v-if="!row.hasParent" style="cursor: pointer;color: #1890ff;" @click.stop="groupDeltailHandle(row.investId)">{{ row.investName }}</span>
              <span v-else style="cursor: pointer;color: #666;" @click.stop="$message('该子投资已被引用，请重新选择')">{{ row.investName }}</span> -->
              {{row.investName}}
            </template>
          </el-table-column>
          <el-table-column prop="currentEquity" label="资产金额(万元)" sortable="custom" width="140" align="center"></el-table-column>
          <el-table-column prop="unitNetworth" label="单位净值" sortable="custom" min-width="130" show-overflow-tooltip align="center"></el-table-column>
          <el-table-column prop="currentShare" label="资产份额(份)" sortable="custom" min-width="130" show-overflow-tooltip align="center"></el-table-column>
          <el-table-column prop="incomeRate" label="收益率" sortable="custom" min-width="120" show-overflow-tooltip align="center">
            <template slot-scope="{row}">
              <span v-if="row.incomeRate||row.incomeRate!==null" :class="row.incomeRate>=0?'positiveFc':'negativeFc'">{{ row.incomeRate }}%</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column prop="incomeRateToday" label="当日收益率" sortable="custom" min-width="120" show-overflow-tooltip align="center">
            <template slot-scope="{row}">
              <span v-if="row.incomeRateToday||row.incomeRateToday!==null" :class="row.incomeRateToday>=0?'positiveFc':'negativeFc'">{{ row.incomeRateToday }}%</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column prop="incomeRateWeek" label="近1周收益率" sortable="custom" min-width="125" show-overflow-tooltip align="center">
            <template slot-scope="{row}">
              <span v-if="row.incomeRateWeek||row.incomeRateWeek!==null" :class="row.incomeRateWeek>=0?'positiveFc':'negativeFc'">{{ row.incomeRateWeek }}%</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column prop="incomeRateMonth" label="近1月收益率" sortable="custom" min-width="125" show-overflow-tooltip align="center">
            <template slot-scope="{row}">
              <span v-if="row.incomeRateMonth" 
              :class="row.incomeRateMonth>=0?'positiveFc':'negativeFc'">{{ row.incomeRateMonth }}%</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column prop="incomeRateHalfYear" label="近6月收益率" sortable="custom" min-width="125" show-overflow-tooltip align="center">
            <template slot-scope="{row}">
              <span v-if="row.incomeRateHalfYear" 
              :class="row.incomeRateHalfYear>=0?'positiveFc':'negativeFc'">{{ row.incomeRateHalfYear }}%</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column prop="incomeRateYear" label="近1年收益率" sortable="custom" min-width="125" show-overflow-tooltip align="center">
            <template slot-scope="{row}">
              <span v-if="row.incomeRateYear" 
              :class="row.incomeRateYear>=0?'positiveFc':'negativeFc'">{{ row.incomeRateYear }}%</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column prop="networthTime" label="净值日期" sortable="custom" width="100" align="center">
            <template slot-scope="{row}">
              <span>{{ row.networthTime | parseTime }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="investName" label="关联策略" sortable="custom" min-width="140" show-overflow-tooltip align="center"></el-table-column>
          <el-table-column prop="investIndexText" label="对标指数" sortable="custom" min-width="120" show-overflow-tooltip align="center"></el-table-column>
          <el-table-column prop="investStarttime" label="投资时间" sortable="custom" min-width="100" show-overflow-tooltip align="center"></el-table-column>
          <el-table-column prop="investStatusName" label="投资状态" sortable="custom" min-width="100" show-overflow-tooltip align="center"></el-table-column>
          <el-table-column prop="username" label="创建人" sortable="custom" min-width="100" show-overflow-tooltip align="center"></el-table-column>
          <el-table-column label="操作" align="center" width="120" fixed="right">
            <template slot-scope="{row}">
              <el-button class="filter-item" size="mini" :disabled="row.addType==1" icon="el-icon-edit-outline" @click="enternetValueHandle(row)">
                录入净值
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="list" v-if="type === 'check'">
          <div class="list-title">
            <span>已勾选</span>
            <span>({{ checkList.length }})</span>
          </div>
          <div style="height: 468px; overflow-y: scroll">
            <div
              class="list-item"
              v-for="(item, index) in checkList"
              :key="index"
            >
              <span class="list-item-content">
                {{ item.investName }}
              </span>
              <i class="el-icon-close close" @click="delList(index)"></i>
            </div>
          </div>
        </div>
      </div>

      <div>
        <el-button
          v-if="type !== 'id'"
          style="float: right; margin-top: 15px; width: 160px; font-size: 12px"
          type="primary"
          size="small"
          @click="submitCheck()"
        >
          确认
        </el-button>
        <pagination
          style="text-algin: left"
          v-show="total > 0"
          :total="total"
          :layout="'total, sizes, prev, pager, next'"
          :page.sync="listQuery.pageCurrent"
          :limit.sync="listQuery.limit"
          @pagination="getList"
        />
      </div>
    </el-dialog>
    <enternetValueOpen ref="enternetValueOpen" v-if="hasEnternetValueOpen" @closeOpen="getList"></enternetValueOpen>
  </div>
</template>

<script>
import { queryInvestInfoByPage } from '@/api/subInvest'
import Pagination from "@/components/Pagination"
import { STATUS_OPTIONS } from "../const"
import enternetValueOpen from '@/views/afterManage/component/enternetValueOpen.vue'

export default {
  props: {
    userId: String | Number,
    title: { type: String, default: "更改策略（单选）" },
    type: { type: String, default: "id" },
    nolink: {
      type: Boolean,
      default: false
    },
    appendToBody: {
      type: Boolean,
      default: false
    }
  },
  components: { Pagination,enternetValueOpen },
  data() {
    return {
      noInvestName: false,
      visible: false,
      listLoading: false,
      total: 0,
      listQuery: {
        pageCurrent: 1,
        limit: 20
      },
      dataForm: {
        investName: "",
        investStatus: ""
      },
      list: [],
      checkList: [],
      radioList: [],
      radio: "",
      checkArr: [],
      statusList: STATUS_OPTIONS,
      rmoney: Function,
      hasEnternetValueOpen: false,
    };
  },
  methods: {
    sortChange() {},
    tableRowClassName({ row, rowIndex }) {
      return "list-row";
    },
    closeHandle() {
      this.visible = false;
    },
    // 初始化
    init() {
      this.radio = "";
      this.visible = true;
      this.checkArr = [];
      this.checkList = [];
      this.listQuery = {
        pageCurrent: 1,
        limit: 20
      };
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        this.$refs.table.clearSelection();
        this.getList();
      });
    },
    searchList() {
      this.listQuery.pageCurrent = 1;
      this.getList();
    },
    // 策略列表
    getList() {
      return new Promise((resolve) => {
        this.listLoading = true;
        queryInvestInfoByPage({
          userId: this.userId,
          ...this.dataForm,
          ...this.listQuery,
          investManageType: 2
        }).then((res) => {
          this.listLoading = false;
          // this.list = res.body.map((items, index) => {
          //   items.id = index;
          //   return items;
          // });
          this.list = res.body.list
          console.log("子投资列表", this.list);
          this.total = res.body.total || 0;
          resolve(true);
        });
      });
    },
    resetForm() {
      this.$refs["dataForm"].resetFields();
      this.getList();
    },
    // 单选双击选中
    dblclickHandle(row) {
      if (this.type !== "check") {
        this.$emit("selctInvestName", row);
        this.visible = false;
      }
    },
    // 行选中
    submitHandle(row, col) {
      // if (this.allStrategyType == 0) {
      // if (!row.hasNetworth) {
      //   this.$message({
      //     message: "该产品净值不存在或者少于2条",
      //     warning: "warning"
      //   });
      //   return;
      // }
      if (row.hasParent) {
        this.$message({
          message: "该子投资已被引用，请重新选择",
          warning: "warning"
        });
        return;
      }
      // }
      if (this.type === "id") {
        this.$emit("selctInvestName", row);
        this.visible = false;
      } else if (this.type === "radio") {
        this.radio = row.investId;
        this.radioList = row;
      } else if (this.type === "check") {
        if (this.checkArr.indexOf(row.investId) === -1) {
          this.checkArr.push(row.investId);
          this.checkList.push(row);
        } else {
          for (var i = 0; i < this.checkArr.length; i++) {
            if (this.checkArr[i] === row.investId) {
              this.checkArr.splice(i, 1);
              this.checkList.splice(i, 1);
            }
          }
        }
      }
    },
    delList(i) {
      this.checkArr.splice(i, 1);
      this.checkList.splice(i, 1);
    },
    // 多选
    handleSelectionChange(rows) {
      this.checkList = rows.map((item) => {
        return item;
      });
    },
    enternetValueHandle(row) {
      this.hasEnternetValueOpen = true
      this.$nextTick(() => {
        this.$refs.enternetValueOpen.init({
          investName: null,
          strategyId: row.investId,
          strategyName: row.investName,
          userId: this.userId,
          networth: row.unitNetworth,
          networthTime: row.networthTime,
          strategyNetWorthStyle: 0,
        })
      })
    },
    // 确认
    submitCheck() {
      console.log(this.radioList)
      if (this.type === "radio" && this.radioList.investId !== undefined) {
        console.log('子投资弹窗', this.radioList);
        this.$emit("selctSubInvestName", this.radioList);
        this.visible = false;
      } else if (this.type === "check" && this.checkList.length > 0) {
        console.log('子投资弹窗', this.checkList);
        this.$emit("selCheckctSubInvestName", this.checkList);
        this.visible = false;
      } else {
        this.$message({
          message: "请选择策略",
          type: "info",
          duration: 2 * 1000
        });
      }
    }
  }
};
</script>
<style lang="scss">
.list-row {
  cursor: pointer;
}
</style>
<style lang="scss" scoped>
.afterInvest-add-open {
  ::v-deep .el-dialog__body {
    min-height: 600px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  ::v-deep .pagination-container {
    padding: 15px 0;
    text-align: left;
  }
  .title {
    line-height: 53px;
    background: #d4dfef;
    padding-left: 20px;
    color: #333333;
    font-weight: bold;
    font-size: 18px;
  }
  .title2 {
    margin-top: 15px;
  }
  .head {
    border: 1px solid #ddd;
    ::v-deep .el-form {
      margin-top: 15px;
    }
  }
  .filex {
    display: flex;
    justify-content: space-between;
    .list {
      margin-left: 15px;
      width: 280px;
      min-height: 200px;

      &-title {
        background: #f5f7fa;
        color: #333;
        font-weight: bold;
        height: 47px;
        padding-left: 16px;
        line-height: 36px;
      }
      &-item {
        background: #f5f7fa;
        margin-top: 10px;
        font-size: 14px;
        padding-left: 10px;
        line-height: 30px;
        &:hover {
          color: #1890ff;
        }
        &-content {
          width: 210px;
          display: inline-block;
        }
      }
      .close {
        padding: 0 10px;
        line-height: 30px;
        cursor: pointer;
      }
    }
  }
  .table-content {
    border: 1px solid #ddd;
    padding: 5px;
    font-size: 12px;
    font-weight: bold;
    // margin-top: 15px;
  }
  .checkhidden {
    display: inline-block;
    width: 80px;
    height: 34px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
  }
  ::v-deep .el-table__fixed {
    height: 100% !important; //设置高优先，以覆盖内联样式
  }
  ::v-deep .el-table__fixed-right {
    height: 100% !important; //设置高优先，以覆盖内联样式
  }
}
</style>
